<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				border: 1px solid black;
				width: 600px;
				border-collapse: collapse;
			}
			
			th {
				border: 1px solid black;
				background-color: #98e1f5
			}
			
			td {
				border: 2px solid black;
			}
		</style>
		<script type="text/javascript">
			var records = [{
					ck: false,
					img: "img/img1.jpg",
					name: "商品-2",
					money: 12.3,
					num: 1
				},
				{
					ck: false,
					img: "img/img1.jpg",
					name: "商品-3",
					money: 15.3,
					num: 1
				},
				{
					ck: false,
					img: "img/img1.jpg",
					name: "商品-4",
					money: 18.3,
					num: 1
				},
				{
					ck: false,
					img: "img/img1.jpg",
					name: "商品-5",
					money: 19.3,
					num: 1
				}

			];
//			var records = [
//				[false, "img/img1.jpg", "商品-2", 12.3, 1],
//				[false, "img/img1.jpg", "商品-3", 15.3, 1],
//				[false, "img/img1.jpg", "商品-4", 18.3, 1],
//				[false,	"img/img1.jpg", "商品-5", 19.3, 1]
//			];

			function addnum(e){				
				e.value=parseInt(e.value)+1
			}
			function subnum(e){
				var i=parseInt(e.value);
				if (i>0)
				e.value=parseInt(e.value)-1 		
			}
			function checkrd(e){		
			//	alert(e.checked)
				var otable = document.getElementById("tbody1");		
				for (var i=0;i<otable.rows.length;i++){
					var ck = document.getElementById("c"+i);
					console.log(i);
					ck.checked=e.checked;
				}
			}
			function data2format(field,id,value){
				switch (field){
				  case "ck":	formatstr="<input type=\"checkbox\" name=[id] id=[id] value=[value] />"; break;
				  case "img":	formatstr="<img src=[value] width=50 height=50 />"; break;
				  case "name":	
				  case "money":	formatstr="[value]"; break;
				  case "num":	formatstr="<input type=\"button\" id=\"[id]_bt1\"  value=\"-\" onclick=\"subnum(document.getElementById('[id]_num'))\" />";
				   formatstr+="<input type=\"text\" name=\"[id]_num\" id=\"[id]_num\" value=\"[value]\" readonly=\"true\" />";
				   formatstr+="<input type=\"button\" id=\"[id]_bt2\" value=\"+\" onclick=\"addnum(document.getElementById('[id]_num'))\" />"; 
				   break;
				}
				formatstr=formatstr.replace(/\[id\]/g,id);
				formatstr=formatstr.replace(/\[value\]/g,value)	;	
			
				//formatstr=replace(formatstr,"[id]",id);
				//formatstr=replace(formatstr,"[value]",value);
				//	console.log(formatstr)
				return formatstr;

			}
            function replace(oldstr,repstr,newvalue){
            	if (oldstr.indexOf(repstr)==-1)
            	    return oldstr;        
            	oldstr=oldstr.replace(repstr,newvalue);
            	return replace(oldstr,repstr,newvalue);
            }
			function record2rowsarr(){
				var myrows=new Array();
				for(var i = 0; i < records.length; i++) {
			    	var ob=	records[i];			
				    var mycells=new Array();
				    mycells[0]=data2format("ck","c"+(i+1),ob.ck);
				    mycells[1]=data2format("img","c"+(i+1),ob.img);
				    mycells[2]=data2format("name","c"+(i+1),ob.name);
				    mycells[3]=data2format("money","c"+(i+1),ob.money);
				    mycells[4]=data2format("num","c"+(i+1),ob.num);
				    myrows[i]=mycells;
				   }
				return myrows;
			}
			function insertrecord() {
				var otable = document.getElementById("table1");
			    var myarr=record2rowsarr(records);			
				for(var i = 0; i < myarr.length; i++) {
					//console.log(myarr[i]);
					addRow(otable, myarr[i]);					
				}
				for(var i = 0; i < myarr.length; i++) {
								
				}
			}

			function addcell(row, i, str) {
				//console.log(i+str);
				var cell = row.insertCell(i);
				cell.innerHTML = str;
			
			}

			function addRow(obj, strs) {
				try {
					var row = obj.insertRow();
					for(var i = 0; i < strs.length; i++){
						addcell(row, i, strs[i]);					
					}
				} catch(err) {
						console.log(err);
				}
			}
		</script>
	</head>

	<body onload="insertrecord()">
		<p id="head1">商品浏览</p>
		<table id="table1" class="table1style">
		
				<tr>
					<th ><input type="checkbox" name="ck" id="ck" value="false" onclick="checkrd(this)" /> 全选</th>
					<th>商品</th>
					<th>商品名称</th>
					<th>单价</th>
					<th>数量</th>
				</tr>
		
		<tbody id="tbody1">
				<tr>
					<td><input type="checkbox" name="c0" id="c0" value="false" /></td>
					<td><img src="img/img1.jpg" width=50 height=50 /></td>
					<td>商品-1</td>
					<td>12</td>
					<td><input type="button" name="c0_1" id="c0_1" value="-" />
						<input type="text" name="c0_2" id="c0_2" value="1" readonly="true" />
						<input type="button" name="c0_3" id="c0_3" value="+" />
					</td>
				</tr>
		</tbody>
		</table>
	</body>

</html>